<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100vh;
				background-color: #333;
			}
			.wrap{
				display: flex;
				width: 90vw;
			}
			.card {
				background-size: auto 100%;
				background-position: center;
				background-repeat: no-repeat;
				border-radius: 50px;
				color: #fff;
				flex: 0.5;
				cursor: pointer;
				height: 80vh;
				position: relative;
				margin: 10px;
				transition: flex 0.7s cubic-bezier(0.05, 0.6, 0.4, 0.9);
			}
			.card h3{
				font-size: 20px;
				position: absolute;
				bottom: 20px;
				left: 20px;
				margin: 0;
				transition: opacity 0s ease-in 0s;
			}
			.active{
				
				flex: 5;
			}
			.card.activ h3{
				opacity: 1;
				transition: opacity 0.3s ease-in 0.4s;
			}
			
			@media (max-width: 500px) {
				.wrap{
					width: 100vw;
				}
				.card:nth-child(4){
					display: none;
				}
				.card:nth-child(5){
					display: none;
				}
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="card active" style="background:url(img/timg.jpg) ;">
				<h3>1</h3>
			</div>
			<div class="card" style="background:url(img/timg.jpg) ;">
				<h3>2</h3>
			</div>
			<div class="card" style="background:url(img/timg.jpg) ;">
				<h3>3</h3>
			</div>
			<div class="card" style="background:url(img/timg.jpg) ;">
				<h3>4</h3>
			</div>
			<div class="card" style="background:url(img/timg.jpg);">
				<h3>5</h3>
			</div>
		</div>
		<script type="text/javascript">
			//获取小卡片
			var wrap = document.querySelector('.wrap');
			var cards = wrap.querySelectorAll('.card');
			console.log(wrap);
			console.log(cards);
			
			//遍历节点给cards添加移入事件，并添加active类名即可实现
			for (var i = 0; i < cards.length; i++) {
				cards[i].addEventListener('mouseover',function(){
					//事前先清楚下
					removeActive()
					//给card添加active类名
					this.className = "card active";
				})
			}
			
			function removeActive(){
				for (var i = 0; i < cards.length; i++) {
					cards[i].className = "card"
				}
			}
			
		</script>
	</body>
</html>
